<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script>
        const AMAP_SAFETY_KEY = '905035c5847521d95886f1658ad3f559';
        window._AMapSecurityConfig = {
            securityJsCode: AMAP_SAFETY_KEY, // 高德安全密钥
        }
    </script>
    <title>高德地图经纬度抓取</title>


    <style>
        .map {
            margin: 50px;
            height: 500px;
            width: 80%;
        }
        .result {
            margin: 0 50px;font-size: 28px;
        }
        .result div {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div style="width: 80%;margin: 30px; margin-bottom: 0px; display: flex">
    <input type="text" id="searchInput" style="margin: 30px;height: 50px" placeholder="输入地址搜索">
    <button id="btn" style="width: 130px; margin-top: 30px; height: 50px">搜索</button>
</div>


<div id="container" class="map"></div>
<div class="result">
    点击地图获取经纬度
    <div>鼠标点击纬度：<span id="c-latitude"></span></div>
    <div>鼠标点击经度：<span id="c-longitude"></span></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b700fa920e7b8a05b84701cac3cfc908&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">

    window.onload = function() {

        var map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 11,
            center: [116.397428, 39.90923] // 设置中心点坐标
        });
        // 为地图注册 click 事件获取鼠标点击出的经纬度坐标
        map.on('click', function (e) {
            console.log(e)
            document.getElementById("c-longitude").innerText = e.lnglat.getLng()
            document.getElementById("c-latitude").innerText = e.lnglat.getLat()
        });



         $("#btn").click(function(){
             var input = document.getElementById('searchInput').value;
             AMap.plugin('AMap.PlaceSearch', function() {
                 var placeSearch = new AMap.PlaceSearch({ // 构造地点查询类
                     pageSize: 5, // 单页显示结果条数
                     pageIndex: 1, // 页码
                     city: "全国", // 兴趣点城市
                     map: map // 展现结果的地图实例
                 });

                 // 执行搜索关键字查询
                 placeSearch.search(input, function(status, result) {
                     // 查询成功时，result即对应匹配的POI信息
                     console.log(result);
                 });
             });
         })


    }


</script>
</body>
